<template>
  <!-- 用户抗位置泄露-大屏 -->

  <el-container ref="bigModel" class="main-model">
    <el-header>
      <Header :active-title="3" />
    </el-header>
    <el-main>

      <div class="home-model">
        <el-row style="height: 100%">
          <el-col :span="leftModelSpan" style="height: 100%">
            <div class="home-model-left">
              <dialog131 />
              <dialog13 />
              <userifm />
              <Dialog class="Tc" />
              <div class="zindexModel" />
              <img :src="require('@/assets/xd/xd-bg3.png')" alt="" style="
                  position: absolute;
                  z-index: 0;
                  width: 100%;
                  height: 100%;
                ">
              <img v-if="rightModelShow" :src="require('@/assets/xd/new/Group 1142813242.png')" alt="" class="rightJ"
                style="z-index: 5;" @click="hideRightModel">
              <img v-else :src="require('@/assets/xd/new/Group 1142813263.png')" alt="" class="rightJ"
                style="z-index: 5;" @click="showRightModel">
            </div>
          </el-col>
          <el-col :span="rightModelSpan">
            <div class="home-model-right">
              <div class="infoModel">
                <div class="infoTitle flex-container">
                  用户位置泄露风险统计
                  <el-button type="text" @click="toantiLocalization" class="more">
                    更多
                  </el-button>
                </div>
                <div class="infoContent" :style="{ height: infoHeight + 'px' }">
                  <barchart />
                </div>
              </div>

              <div class="infoModel">
                <div class="infoTitle flex-container">
                  用户位置泄露风险告警
                  <!-- 跳转终端页面 -->
                  <el-button type="text" @click="toantiLocalization" class="more">
                    更多
                  </el-button>
                </div>
                <div class="infoContent" :style="{ height: infoHeight + 'px' }">
                  <list-scroll class="box" :speed="0.5">
                    <div class="list">
                      <div class="infoItem1" v-for="(item, index) in infoList" :key="index">
                        <div class="_num">
                          {{ index + 1 }}
                        </div>
                        <div class="_cont">
                          {{ item.content }}
                        </div>
                      </div>
                    </div>
                  </list-scroll>
                </div>
              </div>

              <div class="infoModel">
                <div class="infoTitle flex-container">
                  用户抗定位任务列表
                  <!-- 跳转终端页面 -->
                  <el-button type="text" @click="toantiLocalization" class="more">
                    更多
                  </el-button>
                </div>
                <div class="infoContent" :style="{ height: infoHeight + 'px' }">
                  <list-scroll class="box" :speed="0.5">
                    <div class="list">
                      <div class="infoItem2" v-for="(item, index) in infoList2" :key="index">
                        <div class="_num">
                          {{ index + 1 }}
                        </div>
                        <div class="_cont">
                          {{ item.content }}
                        </div>
                      </div>
                    </div>
                  </list-scroll>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

    </el-main>
  </el-container>
</template>

<script>
import Header from "@/views/xd/components/Header";
import Dialog from "@/views/xd/components/dialog/dialog.vue";
import dialog131 from "@/views/xd/components/dialog/dialog14.vue";
import dialog13 from "@/views/xd/components/dialog/dialog13.vue";
import barchart from "@/views/xd/components/charts/3DColumnChart2.vue"
import userifm from "@/views/xd/components/dialog/userInformation.vue";
import ListScroll from "@/components/DtSrcollCopy2";
import * as echarts from 'echarts';

// import Dialog from "../components/components/dialog/dialog.vue";

// const toPath = (e) => {
//   console.log(e)
//   router.push({path:'/'+e,query:{id:'1'}});
// };
export default {
  components: { Header, Dialog, dialog131, dialog13, ListScroll, barchart, userifm },
  data() {
    return {
      rightModelShow: true,
      rightModelSpan: 5,
      leftModelSpan: 19,
      activeIndex: "1",
      activeIndex2: "1",
      formInline: {
        user: "",
        region: "",
      },
      infoList: [
        {
          content: "宁小宁，2846059400，存在家庭地址泄露",
        },
        {
          content: "404noence，3041184793，存在工作地址泄露",
        },
        {
          content: " 万理PKT，7800534882，存在工作地址泄露",
        },
        {
          content: "V-ersion，5638987914，存在家庭地址泄露",
        },
        {
          content: " _叶抱一，5083838438，存在家庭地址泄露",
        },
        {
          content: "  娱千千，7738694985，存在工作地址泄露",
        },
        {
          content: " 吃瓜群众CJ，1885688010，存在家庭地址泄露",
        },
        {
          content: "賣勾靠杯，5577340573，存在工作地址泄露",
        },
        {
          content: "宁小宁，2846059400，存在家庭地址泄露",
        },
        {
          content: "404noence，3041184793，存在工作地址泄露",
        },
        {
          content: " 万理PKT，7800534882，存在工作地址泄露",
        }
      ],
      infoList2: [
        {
          content: "开心超人，4516561265，抗定位任务已完成",
        },
        {
          content: "UB6598，1353584514，抗定位任务已完成70%",
        },
        {
          content: "无敌王龙，8455874623，抗定位任务已完成60%",
        },
        {
          content: "吃瓜群众，1285634898，抗定位任务已完成50%",
        },
        {
          content: "世界和平，3648527445，抗定位任务完成40%",
        },
        {
          content: "海阔天空，8415274541，抗定位任务已完成30%",
        },
        {
          content: "HO，4514956665，抗定位任务已完成",
        }
      ],

      infoHeight: 300,
      scrollTop: 0,
    };
  },
  mounted() {
    this.infoHeight = (this.$refs.bigModel.$el.offsetHeight - 80) / 3;
    let that = this;

  },
  methods: {
    toantiLocalization() {
      this.$router.push("/networkUser/antiLocalization");
    },
    hideRightModel() {
      this.rightModelShow = false;
      this.rightModelSpan = 0;
      this.leftModelSpan = 24;
    },
    showRightModel() {
      this.rightModelShow = true;
      this.rightModelSpan = 5;
      this.leftModelSpan = 19;
    },

    onSubmit() { },
  },
};
</script>
<style lang="scss" scoped>
.home-model-right {

  border-radius: 5px;
  padding: 5px;

  .infoContent {
    padding-top: 48px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .infoModel {
    position: relative;

    .infoTitle {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background-image: url(~@/assets/xd/new/title.png);
      background-size: 100% 80%;
      background-repeat: no-repeat;
      color: #fff;
    }

    .infoBody {
      height: 100%;
      padding-top: 48px;
      box-sizing: border-box;
    }
  }
}
.home-model-left {
  position: relative;
  height: 100%;
}
.home-model {
  position: relative;
  width: 100%;
  height: 100%;
}
.body {
  font-size: 18px;
  position: absolute;
  top: 60px;
  right: 10px;
  padding: 8px;
  color: #90CEE9;
}



.bg {
  position: absolute;
  top: 0;
  left: 0;
  padding: 30px;
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/xd/dialogbg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 10000;
}

.Dialog1 {
  position: absolute;
  left: 100px;
  top: 200px;
  width: 420px;
  height: 250px;
}

.title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 22px;
  color: #ffffff;
  line-height: 1px;
  text-align: left;
  font-style: normal;
  text-align: center;
  font-weight: bold;
}

.Tc {
  position: absolute;
  bottom: 10px;
  right: 30px;
  width: 400px;
  height: 300px;
}

.flex-container {
  display: flex;
  justify-content: space-between;
}

.scroll-div {
  margin-top: 10px;
  overflow: hidden;
  animation: scroll 1s linear infinite;
}

.infoItem {
  line-height: 1.3em !important;
  font-size: 18px;
}

.home-model-right .infoModel .infoTitle {
  z-index: 1;
}

.infoList {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.scroll-div {
  position: absolute;
  width: 100%;
  bottom: -1px;
  margin-top: 10px;
  overflow: hidden;
  border-top-left-radius: 30px;
}

.el-header {
  padding: 0;
  z-index: 5;
}

.more {
  color: #fff;
  font-size: 22px;
  font-weight: bold;
}

.zindexModel {
  position: absolute;
  background-color: #153968a6;

  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
</style>
